import Vue from "vue";
import Router from "vue-router";
import store from "../store";

// 导入页面组件
import Login from "../views/Login.vue";
import Register from "../views/Register.vue";
import BlogList from "../views/BlogList.vue";
import BlogDetail from "../views/BlogDetail.vue";
import BlogCreate from "../views/BlogCreate.vue";
import BlogEdit from "../views/BlogEdit.vue";
import UserProfile from "../views/UserProfile.vue";
import UserEdit from "../views/UserEdit.vue";
import ChangePassword from "../views/ChangePasswd.vue";
import UserList from "../views/UserList.vue";
import Dashboard from "../views/Dashboard.vue";
import NotFound from "../views/NotFound.vue";
import UserDetail from "../views/UserDetail.vue";

Vue.use(Router);

const router = new Router({
  mode: "history",
  routes: [
    {
      path: "/auth/login",
      name: "Login",
      component: Login,
      meta: { public: true }, // 公开页面
    },
    {
      path: "/auth/register",
      name: "Register",
      component: Register,
      meta: { public: true }, // 公开页面
    },
    {
      path: "/blogs",
      name: "BlogList",
      component: BlogList,
      meta: { requiresAuth: true }, // 需要登录
    },
    {
      path: "/blog/:id(\\d+)",
      name: "BlogDetail",
      component: BlogDetail,
      meta: { requiresAuth: true },
    },
    {
      path: "/blog/create",
      name: "BlogCreate",
      component: BlogCreate,
      meta: { requiresAuth: true },
    },
    {
      path: "/blog/:id(\\d+)/edit",
      name: "BlogEdit",
      component: BlogEdit,
      meta: { requiresAuth: true },
    },
    {
      path: "/user/:id(\\d+)",
      name: "UserProfile",
      component: UserProfile,
      meta: { requiresAuth: true },
    },
    {
      path: "/user/:id(\\d+)/detail",
      name: "UserDetail",
      component: UserDetail,
      meta: { requiresAuth: true },
    },
    {
      path: "/user/:id(\\d+)/edit",
      name: "UserEdit",
      component: UserEdit,
      meta: { requiresAuth: true },
    },
    {
      path: "/profile/change-password",
      name: "ChangePassword",
      component: ChangePassword,
      meta: { requiresAuth: true },
    },
    {
      path: "/admin/users",
      name: "UserList",
      component: UserList,
      meta: { requiresAuth: true, isAdminRole: true }, // 需要管理员权限
    },
    {
      path: "/dashboard",
      name: "Dashboard",
      component: Dashboard,
      meta: { requiresAuth: true, isAdminRole: true }, // 管理员面板
    },
    // 重定向到登录页
    {
      path: "",
      redirect: "/auth/login",
    },
    {
      path: "/",
      redirect: "/auth/login",
    },
    // 404页面
    {
      path: "/*", // Vue Router 4的写法
      name: "NotFound",
      component: NotFound,
      meta: { public: true },
    },
    // ,
    // {
    //   path: "*",
    //   redirect: "/login",
    // },
  ],
});

// 路由守卫：实现未登录强制跳转登录页
router.beforeEach((to, from, next) => {
  const isLoggedIn = !!localStorage.getItem("token");
  const user = JSON.parse(localStorage.getItem("user") || "{}");
  const isAdminRole = user.role === "admin";
  console.log("to-", to);
  console.log("from-", from);
  console.log("next-", next);

  // 公开页面（登录和注册）
  if (to.meta.public) {
    // 已登录用户访问登录页，自动跳转
    if (isLoggedIn) {
      if (to.path === "/blog/create") {
        return next("/blog/create");
      }
      return next(isAdminRole ? "/dashboard" : "/blogs");
    }
    return next();
  }

  // 未登录用户访问需要登录的页面，强制跳转登录页
  if (!isLoggedIn) {
    return next("/auth/login");
  }

  // 验证管理员权限
  if (to.meta.isAdminRole && !isAdminRole) {
    if (to.path === "/dashboard") {
      next();
    }
    return next("/blogs");
  }

  next();
});

export default router;
